<template>
	<view>
		<view @click="explainopen" class="explain">
			<image src="../../static/icon/aa/explain.png"></image>
		</view>
		<view class="listbox">
			<!-- <view style="width: 100%;height: 90rpx;"></view> -->
			<view class="beij">
				<view class="beijitem rank1">
					<view class="rank1image">
						<image class="rank1image-image" src="../../static/icon/aa/rank1.png">
						</image>
						<image mode="aspectFill" class="rank1image-avatar" :src="ranking1.picture">
						</image>
					</view>
					<view style="font-size: 50rpx;color:#ffffff;font-weight: bold;margin-top: 10rpx;">
						No.1</view>
					<view style="font-size: 28rpx;color: #ffffff;font-weight: 600;margin-bottom: 12rpx;">
						{{ranking1.name}}
					</view>
					<view class="rank1item flex ac jc">
						<image src="../../static/icon/aa/tupbio.png"></image>
						<view style="font-size: 28rpx;color: #ffffff;font-weight: 600;">{{ranking1.succeed}}个</view>
					</view>
				</view>
				<view class="beijitem rank2">
					<view class="rank2image">
						<image class="rank2image-image" src="../../static/icon/aa/rank2.png">
						</image>
						<image mode="aspectFill" class="rank2image-avatar" :src="ranking2.picture">
						</image>
					</view>
					<view style="font-size: 30rpx;color:#ffffff;font-weight: bold;margin-top: 10rpx;">
						No.2</view>
					<view style="font-size: 26rpx;color: #ffffff;font-weight: 600;margin: 5rpx 0 5rpx 0;">
						{{ranking2.name}}
					</view>
					<view class="rank2item flex ac jc">
						<image src="../../static/icon/aa/tupbio.png"></image>
						<view style="font-size: 23rpx;color: #ffffff;font-weight: 600;">{{ranking2.succeed}}个</view>
					</view>
				</view>
				<view class="beijitem rank3">
					<view class="rank3image">
						<image class="rank3image-image" src="../../static/icon/aa/rank3.png">
						</image>
						<image mode="aspectFill" class="rank3image-avatar" :src="ranking3.picture">
						</image>
					</view>
					<view style="font-size: 30rpx;color:#ffffff;font-weight: bold;margin-top: 10rpx;">
						No.3</view>
					<view style="font-size: 26rpx;color: #ffffff;font-weight: 600;margin: 5rpx 0 5rpx 0;">
						{{ranking3.name}}
					</view>
					<view class="rank3item flex ac jc">
						<image src="../../static/icon/aa/tupbio.png"></image>
						<view style="font-size: 23rpx;color: #ffffff;font-weight: 600;">{{ranking3.succeed}}个</view>
					</view>
				</view>
			</view>
			<view class="rank-box">
				<view v-for="(item,index) in rankinglist" :key="index" class="rank-list flex ac">
					<view style="font-size: 35rpx;font-weight:bold;color:#353535;width: 60rpx;text-align: center;">
						{{index+4}}
					</view>
					<image mode="aspectFill" style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
						:src="item.picture">
					</image>
					<view style="flex: 1;font-size: 28rpx;">{{item.name}}</view>
					<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">{{item.succeed}}个</view>
				</view>
			</view>
			<view style="width: 100%;height: 200rpx;"></view>
		</view>
		</block>

		<!-- 弹窗 -->
		<view v-if="explainvalie==true" class="explainbox">
			<view class="explainview">
				<view class="explaintitle">大神榜说明</view>
				<view class="explaintext">
					<view>① 大神榜统计周期：统计每周一00:00:00至周日23:59:59的数据，每周一00:00:00重置榜单。</view>
					<view>② 大神榜统计规则：大神榜只计算抓中的娃娃，保夹、补单、平台赠送不计算在大神榜内。</view>
					<view>③ 每周的大神榜TOP10排名结果以当期大神榜结束时间的排名为准。若榜单出现数值相同的情况时，则按照获得此数值的时间越早排名越靠前逻辑，即以榜单排名为准。</view>
					<view>④ 大神榜周榜TOP10可获得对应奖励，详情见榜单奖励弹窗。本周的周榜TOP10奖励将于下周一10:00:00发放至获奖玩家的U币余额。</view>
					<view>⑤ 本平台在法律允许的范围内对活动规则有修改、终止的权利。如有疑问请咨询在线客服。</view>
				</view>
				<view style="width: 100%;height: 50rpx;"></view>
			</view>
			<view style="margin-top: 30rpx;">
				<image @click="explainclose" style="width: 60rpx;height: 60rpx;" src="../../static/icon/aa/closeaa.png">
				</image>
			</view>
		</view>

		<!-- 底部 -->
		<!-- <view class="buttombox flex ac">
			<image
				src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fr8k33Xgzk5Fm4o_pISalJeAX3Gh.png">
			</image>
			<view style="flex: 1;">
				<view style="font-size: 26rpx;">178****2836</view>
				<view class="flex ac" style="font-size: 26rpx;margin-top: 10rpx;">
					<view>未上榜</view>
					<view style="margin-left: 20rpx;">抓中</view>
					<view style="color: #ff4e2e;font-weight: bold;">0个</view>
				</view>
			</view>
			<view class="buttomtxt" @click="make">打榜</view>
		</view> -->


	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				ranking1: [],
				ranking2: [],
				ranking3: [],
				rankinglist: [],
				explainvalie: false,
			}
		},

		onLoad(e) {
			//排行榜3个
			this.listRankingdata()
			//请求列表
			this.lidata()
		},

		methods: {
			async listRankingdata(e) {
				let apply = await request(`${getApp().globalData.http}listRanking`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					cls: 1,
				})
				var arr = apply.data.data
				const sliceA = arr.slice(0, 3)
				this.ranking1 = sliceA[0]
				this.ranking2 = sliceA[1]
				this.ranking3 = sliceA[2]
			},

			async lidata(e) {
				let apply = await request(`${getApp().globalData.http}listRanking`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					cls: 1,
				})
				var arr = apply.data.data //定义数组
				var b = arr.splice(3); //从第三个元素开始执行删除
				console.log(b); //被删除的子数组是[1,2]
				this.rankinglist = b
			},

			//打开说明
			explainclose(e) {
				this.explainvalie = false
			},

			//关闭说明
			explainopen(e) {
				this.explainvalie = true
			},

			make(e) {
				uni.reLaunch({
					url: '../home/home'
				})
			},

		}
	}
</script>

<style lang="scss">
	@import url("rankinga.css");

	// 弹窗说明
	.explainbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: rgba(0, 0, 0, .7);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.explainview {
		width: 570rpx;
		// height: 680rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 0 20rpx;
	}

	.explaintitle {
		font-size: 33rpx;
		text-align: center;
		color: #2d2d2d;
		font-weight: bold;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
	}

	.explaintext {
		// height: 500rpx;
		// overflow-y: scroll;
	}
</style>